<template>
  <div id="StatQues">
    <!--使用公共头部区-->
    <c-header :classId3="className"></c-header>
    <!--统计分析内容区域-->
    <div class="stat-body">
      <div class="stat-header">
        <div class="hea-left">
          <span :class="{Eactive:isedit}" @click="showedit()">编辑问卷</span> |
          <span :class="{Eactive:isedit1}" @click="showedit1()">设置</span>
        </div>
        <div class="hea-right" @click="Heashow=!Heashow">
          <span :class="{heaactive:isheaActive}" @click="isheaActive=!isheaActive">选择问卷</span>
        </div>
        <transition name="fade">
	        <div class="hea-mask" v-if="Heashow">
	          <span>日期</span>
	          <input type="date" />
	          <ul>
	            <li class="li-hr">满意度</li>
	            <li @click="btn()">问卷1</li>
	            <li>问卷2</li>
	            <li>问卷3</li>
	            <li class="li-hr">社会人口特征</li>
	            <li>问卷1</li>
	            <li>问卷2</li>
	            <li>问卷3</li>
	          </ul>
	        </div>
        </transition>
      </div>
      <!--统计分析内容底部区域一-->
      <div class="temb-content" v-if="edit">
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="汇总数据">
            <s-mary></s-mary>
          </el-tab-pane>
          <el-tab-pane label="趋势图">
            <s-trend></s-trend>
          </el-tab-pane>
          <el-tab-pane label="问卷概况">
            <s-urvey></s-urvey>
          </el-tab-pane>
          <el-tab-pane label="样本数据">
            <s-ample></s-ample>
          </el-tab-pane>
          <el-tab-pane label="中奖结果">
            <r-esult></r-esult>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!--统计分析内容底部区域二-->
      <div class="temb-content" v-else>
      	<el-tabs :tab-position="tabPosition">
          <el-tab-pane label="统计设置">
            <s-ummaryset></s-ummaryset>
          </el-tab-pane>
          <el-tab-pane label="中奖设置">
                                 内容待添加
          </el-tab-pane>          
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  //导入底部内容右边组件
  import summary from './summary.vue';
  import trend from './trend.vue';
  import survey from './survey.vue';
  import sample from './sample.vue';
  import result from './result.vue';
  import summaryset from './summaryset.vue';
  //导入公共头部组件
  import cHeader from '../common/quesHeader.vue';
  export default {
    data() {
      return {
        tabPosition: 'left',
        Heashow: false,
        edit: true,
        isedit: true,
        isedit1: false,
        isheaActive: false,
        className: 'active',
        testId: 1
      }
    },
    methods:{
    	btn(){
    		this.bus.$emit('toChangeData',this.testId);
    	},
    	showedit(){
    		this.edit = true;
    		this.isedit = true;
    		this.isedit1 = false;
    	},
    	showedit1(){
    		this.edit = false;
    		this.isedit = false;
    		this.isedit1 = true;
    	}
    },
    components: {
      "s-mary": summary,
      "s-trend": trend,
      "s-urvey": survey,
      "s-ample": sample,
      "r-esult": result,
      "s-ummaryset": summaryset,
      "c-header": cHeader
    }
  }
</script>

<style scoped="scoped">
  #StatQues {
    min-width: 960px;
  }
  #StatQues >>> .el-tabs--left .el-tabs__nav,
  #StatQues >>> .el-tabs--right .el-tabs__nav {
    float: none;
    height: 88vh;
  }
  /*统计分析内容区域*/  
  .stat-body .stat-header {
    height: 55px;
    width: 100%;
    line-height: 55px;
    border-bottom: 1px solid #ccc;
    padding-left: 20px;
    padding-right: 30px;
    box-sizing: border-box;
    position: relative;
  }
  .stat-header .hea-left {
    float: left;
  }
  .stat-header .hea-right {
    float: right;
  }
  .hea-right span{
  	display: block;
  }
  .hea-right .heaactive {
  	color: #3F93DA;
  }
  .stat-header span:hover {
    cursor: pointer;
  }
  /*编辑问卷和设置切换样式*/
  .Eactive{
  	color: #409EFF;
  }
  .stat-header .hea-mask {
    position: absolute;
    right: 105px;
    top: 22px;
    z-index: 99;
    width: 200px;
    height: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 5px 15px;
  }
  .hea-mask span {
    font-size: 14px;
    margin-right: 8px;
  }
  .hea-mask span:hover {
    color: black;
  }
  .hea-mask ul {
    list-style: none;
    margin-top: 0px;
    padding: 0;
  }
  .hea-mask ul li {
    height: 25px;
    line-height: 25px;
    font-size: 14px;
  }
  .hea-mask ul li:hover{
  	color: #3F93DA;
  	cursor: pointer;
  }
  .hea-mask ul .li-hr {
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 1px solid #ccc;
  }
  .hea-mask ul .li-hr:hover{
  	color: black;
  }
  /*统计分析内容底部区域*/  
  #StatQues >>> .el-tabs--left .el-tabs__nav-wrap.is-left {
    margin-right: -1px;
    background-color: rgb(242, 242, 242);
    width: 150px;
    height: 99%;
  }
  #StatQues >>> .el-tabs--left .el-tabs__item.is-left {
    text-align: left;
    padding-top: 25px;
    padding-left: 25px;
  }
  #StatQues >>> .el-tabs__active-bar {
    background-color: transparent;
  }
  /*遮罩层统一动画*/
	.fade-enter {
		opacity: 0;
	}
	.fade-enter-active {
		transition: opacity 1s;
	}
	.fade-leave-to {
		opacity: 0;
	}
	.fade-leave-active {
		transition: opacity 1s;
	}
</style>